<template>
  <div class="mine">
    <van-nav-bar title="会员中心" nav-bar-text-color="@white" />

    <div class="mineShow" v-if="user">
      <!-- 大顶部 -->
      <div class="top-big">
        <div class="top1 clearfix">
          <div class="fl-img fl clearfix">
            <div class="img-pic fl">
              <img
                :src="$pregImg + mine.avatarurl"
                alt=""
                @click="show = true"
              />
            </div>
            <div class="new-name fl">
              <p class="sp-name">{{ mine.nickname }}</p>
              <span class="span-zl">完善资料让小U更懂您</span>
            </div>
          </div>
          <div class="fr-pic fr">
            <div class="fr-pic-img">
              <img src="../../assets/images/red_envelopes.png" alt="" />
            </div>
            <span class="wz-red">每日签到</span>
          </div>
        </div>
        <div class="top2">
          <ul>
            <li>
              <a href="#">
                <span>12</span>
                <span>我的收藏</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span>12</span>
                <span>浏览记录</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span>&yen;0</span>
                <span>我的红包</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span>12</span>
                <span>优惠券</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="top3">
          <div class="first">
            <span class="myorder">我的订单</span>
            <a href="#" class="iconwz">
              <span>全部订单</span>
              <i class="iconfont icon-arrow-right1"></i>
            </a>
          </div>
          <div class="second">
            <ul>
              <li>
                <a href="#">
                  <img
                    src="../../assets/images/icon/user/order/payment.png"
                    alt=""
                  />
                  <span>代付款</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img
                    src="../../assets/images/icon/user/order/delivery.png"
                    alt=""
                  />
                  <span>待收货</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img
                    src="../../assets/images/icon/user/order/evaluation.png"
                    alt=""
                  />
                  <span>评价</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img
                    src="../../assets/images/icon/user/order/service.png"
                    alt=""
                  />
                  <span>售后/退款</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 其他区域 -->
      <!-- src="../../asset/ismages/icon/user/function/address.png" -->

      <div class="other-main">
        <div
          class="row"
          @click="
            $router.push({ path: '/address', query: { path: '/index/mine' } })
          "
        >
          <div class="row-inner">
            <img alt="" />
            <img src="../../assets/images/icon/user/function/address.png" />
            <span>地址管理</span>
          </div>
          <i class="iconfont icon-arrow-right1"></i>
        </div>
        <div class="row">
          <div class="row-inner">
            <img
              src="../../assets/images/icon/user/function/wallet.png"
              alt=""
            />
            <span>我的钱包</span>
          </div>
          <div class="row-inner2">
            <span>剩余200U币</span>
            <i class="iconfont icon-arrow-right1"></i>
          </div>
        </div>
        <div class="row">
          <div class="row-inner">
            <img
              src="../../assets/images/icon/user/function/QR_code.png"
              alt=""
            />
            <span>我的二维码</span>
          </div>
          <i class="iconfont icon-arrow-right1"></i>
        </div>
        <div class="row">
          <div class="row-inner">
            <img
              src="../../assets/images/icon/user/function/partner.png"
              alt=""
            />
            <span>我的小伙伴</span>
          </div>
          <i class="iconfont icon-arrow-right1"></i>
        </div>
        <div class="row">
          <div class="row-inner">
            <img src="../../assets/images/icon/user/function/free.png" alt="" />
            <span>0元试用</span>
          </div>
          <i class="iconfont icon-arrow-right1"></i>
        </div>
      </div>

      <!-- 固定导航栏 -->
      <div class="nav-fix">
        <div class="inner">
          <div class="top">
            <a href="#">
              <img
                src="../../assets/images/icon/nav/home/selected.png"
                alt=""
              />
              <span>商城</span>
            </a>
            <a href="#">
              <img
                src="../../assets/images/icon/nav/home/unselected.png"
                alt=""
              />
              <span>分类</span>
            </a>
            <a href="#">
              <img
                src="../../assets/images/icon/nav/home/unselected.png"
                alt=""
              />
              <span>购物车</span>
            </a>
            <a href="#">
              <img
                src="../../assets/images/icon/nav/home/unselected.png"
                alt=""
              />
              <span>我</span>
            </a>
          </div>
        </div>
      </div>
      <van-dialog
        v-model="show"
        title="确定要退出吗"
        show-cancel-button
        @confirm="exit"
      >
      </van-dialog>
    </div>
    <div class="mineLogin" v-else>
      <van-empty description="您还没有登录呢">
        <van-button
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          round
          @click="$router.push('/login')"
        >
          去登录
        </van-button>
      </van-empty>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      show: false,
    };
  },
  computed: {
    ...mapGetters({
      mine: "mine/mine",
      user: "user",
    }),
  },
  methods: {
    ...mapActions({
      mineListActions: "mine/mineListActions",
    }),
    exit() {
      this.$toast.success("退出成功");
      sessionStorage.removeItem("user");
      sessionStorage.removeItem("path");
      localStorage.removeItem("copy");
      localStorage.removeItem("swiperUrl");
      localStorage.removeItem("loglevel:webpack-dev-server");
      this.$router.push("/login");
    },
  },
  mounted() {
    this.mineListActions(JSON.parse(sessionStorage.getItem("user")));
    document.title = this.$route.meta.title;
  },
};
</script>

<style scoped>
/deep/.btn-group-vertical > .btn-group:after,
.btn-group-vertical > .btn-group:before,
.btn-toolbar:after,
.btn-toolbar:before,
.clearfix:after,
.clearfix:before,
.container-fluid:after,
.container-fluid:before,
.container:after,
.container:before,
.dl-horizontal dd:after,
.dl-horizontal dd:before,
.form-horizontal .form-group:after,
.form-horizontal .form-group:before,
.modal-footer:after,
.modal-footer:before,
.modal-header:after,
.modal-header:before,
.nav:after,
.nav:before,
.navbar-collapse:after,
.navbar-collapse:before,
.navbar-header:after,
.navbar-header:before,
.navbar:after,
.navbar:before,
.pager:after,
.pager:before,
.panel-body:after,
.panel-body:before,
.row:after,
.row:before {
  display: table;
  content: none;
}
.row {
  margin-left: 0px;
}
/* * 顶部返回字体样式  */
/deep/.van-nav-bar {
  background: #ff6040;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  font-weight: bold;
  color: #fff;
}
/deep/ .van-nav-bar__text {
  font-size: 0.12rem;
  color: #fff;
}
/deep/ .van-nav-bar .van-icon {
  font-size: 0.12rem;
  color: #fff;
}

/deep/ [class*="van-hairline"]::after {
  border: none;
}
/deep/ .van-nav-bar__content {
  height: 48px;
}
</style>